<template>
  <div>
    <el-container>
      <el-header>
        <Tops></Tops>
      </el-header>
      <el-container>
        <el-aside >
          <div class="tabFa">
              <el-tree
                :data="list"
                show-checkbox
                node-key="id"
                ref="tree"
                :default-checked-keys="[checkId]"
                highlight-current
                :props="defaultProps"
                class="tabp"
                :default-expanded-keys="[checkId]"
              >
              </el-tree>
            <div>
              <el-button
                type="primary"
                @click="getCheckedKeys"
                class="starts"
                icon="el-icon-pie-chart"
              >开始对比</el-button>
            </div>
          </div>
        </el-aside>
        <el-main>
           <div >
            <!-- <el-tabs v-model="activeName" @tab-click="handles"> -->
              <!-- <el-tab-pane class="titFirst" label="主要工程量指标" name="first"> -->
                  <!-- <el-table
                  v-if="isReloadData"
                    :data="content.tableData"
                    class="cont"
                    @row-click="cont"
                    row-key="id"
                    style="width: 100%"
                    v-loading="loading"
                    border
                    :data-id="1"
                    :height="tableHeight"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    ref="filterTable"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  >
                  <el-table-column
                      v-for="(item, itemInd) in content.columnName"
                      :prop="item.prop"
                      :label="item.label"
                      :key="itemInd"
                      show-overflow-tooltip
                      v-bind="setFixed(item)"
                      width="160"
                  >
                </el-table-column>
                </el-table> -->
                <!-- vxe-table表格 -->
                <vxe-grid
                  ref="xTable"
                  border
                  resizable
                  :max-height="maxTableHeight"
                  :heigth="tableHeight"
                  :tree-config="{children: 'children',expandRowKeys: ['row_2']}"
                  :loading="loading"
                  :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
                  :columns="tableHeader"
                  @cell-click="cellClickEvent"
                  class="cont"
                  :data="content.tableData">
                </vxe-grid>

              <!-- </el-tab-pane> -->
              <!-- <el-tab-pane class="titFirst" label="主要经济指标" name="second">
                  <el-table
                  v-if="isReloadData"
                    :data="condition.tableData"
                    class="cont"
                    @row-click="pzcont"
                  
                    v-loading="loading"
                    style="width: 100%"
                    border
                    :height="tableHeight"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    ref="filterTable"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  >
                  <el-table-column
                      v-for="(item, itemInd) in condition.columnName"
                      :prop="item.prop"
                      :label="item.label"
                      :key="itemInd"
                      show-overflow-tooltip
                      width="150"
                  >
                </el-table-column>
                </el-table>
              </el-tab-pane> -->
            <!-- </el-tabs> -->
          </div>
           <!-- 点击工程量指标展示的详细信息 -->
    <div class="detail" v-if="play">
      <el-tabs :tab-position="tabPosition" @tab-click="handleClick"
      style="height: 380px;" id="footer"
       >
      <div id="expander"></div>
      <div class="icon-down" style="text-align:center;"><i class="el-icon-arrow-down down" style="color:#ffffff" @click="out"></i></div>
      <el-tabs
        v-model="tabCur"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="清单详情"  name="first">
            <div v-html="details.particulars" style="white-space: pre-wrap;text-align:left;"></div>
        </el-tab-pane>
        <el-tab-pane label="清单构成" name="second">
          <el-table
              :data="details.tableData"
              style="width: 100%"
              row-key="quotaInfo"
              border
              id="smallTable"
              height="260"
              :default-sort = "{prop: 'date', order: 'descending'}"
              ref="filterTable"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
          <el-table-column
              v-for="(items, itemInds) in details.columnName"
              :prop="items.prop"
              :label="items.label"
              :key="itemInds"
              show-overflow-tooltip
              v-bind="setFixed(items)"
              width="150"
          >
          </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </el-tabs>
    </div>
        </el-main>
      </el-container>
    </el-container>

    <!-- 点击经济指标展示的详细信息 -->
    <!-- <div class="detail" v-if="show">
      <el-tabs :tab-position="tabPosition" @tab-click="handleClick"
      style="height: 380px;" id="footer"
       >
      <div id="expander"></div>
      <div class="icon-down"><i class="el-icon-arrow-down down" style="color:#ffffff" @click="out"></i></div>
      <el-tabs
        v-model="tabCur"
        type="card"
        @tab-click="handleClick"
        
      >
        <el-tab-pane label="清单详情"  name="first">
            <div v-html="pzdetails.particulars" style="white-space: pre-wrap;text-align:left;"></div>
        </el-tab-pane>
        <el-tab-pane label="清单构成" name="second">
          <el-table
              :data="pzdetails.tableData"
              style="width: 100%"
              row-key="quotaInfo"
              border
              id="smallTable"
              :height="tableHeight"
              :default-sort = "{prop: 'date', order: 'descending'}"
              ref="filterTable"
              show-overflow-tooltip
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
          <el-table-column
              v-for="(items, itemInds) in pzdetails.columnName"
              :prop="items.prop"
              :label="items.label"
              :key="itemInds"
              v-bind="setFixed(items)"
              show-overflow-tooltip
              width="150"
          >
          </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      </el-tabs>
    </div> -->
  </div>
</template>

<script>
import Tops from "../components/Top";
import {Loading} from 'element-ui'
import $ from 'jquery'
export default {
  data() {
    return {
      tableProxy: {
         tableColumn: [
        // { field: 'name', title: '项目', width: 200,fixed:'left',treeNode: true },
      ],
          ajax: {
            // 处理树结构转换
            query: () => XEAjax.post('/QuantitiesQuota').then(
              data => 
                XEUtils.toArrayTree(
                data.tableData, 
                { key: 'id', parentKey: 'parentid',children: 'children' }
              )
              )
          }
        },
       
      search: "",
      content: {},
      list: [],
      loading: true,
      checkId:[],
      defaultProps: {
        children: "children",
        label: "name"
      },
      activeName: "first",
      play: false,
      show: false,
      tableHeight: '',
      tableHeights: '',
      treeArr: [],
      details: [],
      tabCur: "first",
      // condition:[],
      pzdetails:[],
      queryId:null,
      isReloadData:true
    };
  },
    computed:{
      tableHeader(){
        let columns = this.content.columnName;
        let config =[
          { field: 'name', title: '项目', width: 350,fixed:'left',treeNode: true },
        ]
        for(let item in columns){
          if(columns[item].prop!='name'){
            let lists = {
              field:columns[item].prop,
              title:columns[item].label,
              children:[],
            }
            let itemChildren = columns[item].children;
            let dicts=null
            for(let child in itemChildren){
              dicts = { field: 'colName['+(item-1)+']'+'.'+itemChildren[child].prop, 
                        title: itemChildren[child].label,width:320   
                      }
              lists.children.push(dicts)
            }
          config.push(lists)
          }
        }
        return config
      }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab,event);
    },
    getData1(){
      let treeArr = this.$refs.tree.getCheckedKeys();
      let id = this.queryId
      this.checkId = treeArr;
      this.loading=true;
      this.$http.post("/QuantitiesQuota", {
          projId: id,
          partList: treeArr,
        })
        .then(body => {
          this.content = body.data.data;
           this.isReloadData = false;
          this.$nextTick(()=>{
            this.isReloadData = true;
          })
          this.loading = false; 
        });
    },
    // getData2(){
    //   let treeArr = this.$refs.tree.getCheckedKeys();
    //   let id = this.queryId;
    //   this.checkId = treeArr;
    //   this.loading=true;
    //   this.$http.post("/EconomicsQuota",{
    //       projId:id,
    //       partList:treeArr,
    //     }).then(body=>{
    //       this.condition = body.data.data;
    //       this.isReloadData = false;
    //       this.$nextTick(()=>{
    //         this.isReloadData = true;
    //       })
    //       this.loading=false;
    //     });
    // },
    handles(val){
      this.activeName = val.name
      this.getData1()
      // if(val.name =='second'){
      //   this.getData2()
      // }else{
      //   this.getData1()
      // }
    },
    cellClickEvent (column) {
      let ids = localStorage.getItem("pId");
      if(!column.row.children){
        
        let treeArr = this.$refs.tree.getCheckedKeys();
        let id = column.row.id;
        this.axios.post("/QuantitiesConstitute", {
            projId: ids,
            rowId: id,
            rowName: name,
            structureIdList: treeArr
          }).then(body => {
            this.details = body.data.data;
            if(!this.details){
              // this.$alert("暂时没有清单构成数据", "提示", {
              //   confirmButtonText: "确定",
              // });
              this.play = false;
              this.tableHeight = 580;
              return false;
            }else{
              this.play = true;
              this.tableHeight = 70;
              this.tableHeights = 500;
              this.maxTableHeight = 0;
            }
          });
      }else {
        this.play = false;
        this.tableHeight = 580;
      }  
    },
    // cont(row) {
    //   let id = row.id;
    //   let name = row.name;
    //   let le = id.length;
    //   let ids = this.$route.query.id;
    //   if (le > "10") {
    //     let treeArr = this.$refs.tree.getCheckedKeys();
    //     this.axios
    //       .post("/QuantitiesConstitute", {
    //         projId: ids,
    //         rowId: id,
    //         name: name,
    //         structureIdList: treeArr
    //       })
    //       .then(body => {
    //         this.details = body.data.data;
    //         if(!this.details){
    //           this.$alert("暂时没有清单构成数据", "提示", {
    //             confirmButtonText: "确定",
    //           });
    //           this.play = false;
    //           this.tableHeight = 668;
    //           return false;
    //         }else{
    //           this.play = true;
    //           this.tableHeight = 350;
    //         }
    //       });
    //   } else {
    //     this.play = false;
    //     this.tableHeight = 668;
    //   }
    // },
    setFixed(item){
      const fixedArr = ['name'];
      return fixedArr.includes(item.prop)?{fixed:'left'}:'';
    },
    pzcont(row) {
      let id = row.id;
      let name = row.name;
      let le = id.length;
      let ids = this.$route.query.id;
      if (le > "10") {
        this.show = true;
        this.tableHeight = 350;
        let treeArr = this.$refs.tree.getCheckedKeys();
        this.axios
          .post("/EconomicsConstitute", {
            projId: ids,
            rowId: id,
            name: name,
            structureIdList: treeArr
          })
          .then(body => {
            this.pzdetails = body.data.data;
          });
      } else {
        this.show = false;
        this.tableHeight = 580;
      }
    },
    out() {
      this.play = false;
      this.tableHeight = 580;
    },
    getCheckedKeys() {
      let tabActive = this.activeName
        this.getData1()

      // if(tabActive=='first'){
      //   this.getData1()
      // }else{
      //   this.getData2()
      // }
    },
    getInit(){
      let id = this.queryId
      this.$http
          .post("/GetLeftTree", {
            projId: id
          })
          .then(result => {
            this.data = result.data;
            if (this.data.status == "200") {
              this.list = this.data.data;
              this.checkId = this.list[0].id;
            }
          });
    }
  },
  components: {
    Tops
  },
  mounted() {
    // this.queryId = this.$route.params.id;
    this.queryId = localStorage.getItem("pId");
    this.tableHeight = 770;
    this.tableHeights = 0;
    this.maxTableHeight = 770;
    this.getInit();
    this.getData1();
    $(function(){
      var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 10;
      $(document).on('mousedown','#expander',function(e){
          src_posi_Y = e.pageY;
          is_mouse_down = true;
      });
      $(document).bind("click mouseup",function(e){
        if(is_mouse_down){
            is_mouse_down = false;
          }
      }).mousemove(function(e){
         dest_posi_Y = e.pageY;
         move_Y = src_posi_Y - dest_posi_Y;
         src_posi_Y = dest_posi_Y;
         destHeight = $("#footer").height() + move_Y;
         if(is_mouse_down){
             if(destHeight<=400){
                destHeight =400; 
              }
              if(destHeight>=600){
                destHeight = 600;
              }
            this.tableHeights = destHeight;
            $("#footer").css("height", destHeight);
            $("#smallTable").css("height", destHeight-100);
         }
      })
    })
  },
  startLoading: function() {
      loading = Loading.service({
          lock: true,
          text: '加载中……',
          background: 'rgba(1, 1, 1, 0.7)'
      })
    },
  endLoading: function() {
      loading.close();      
  }
};
</script>
<style lang="stylus" scoped>
.el-tree{
  height:730px;
}
.starts {
  position: fixed;
  left: 4rem;
  bottom: 0;
  height: 50px;
  width: 8rem;
  font-size: 1rem;
}

.cont:hover {
  cursor: pointer;
}

.down {
  color: #409EFF;
  font-size: 1.5rem;
}

.down:hover {
  cursor: pointer;
}
.tabFa{
  margin-top:20px; 
  width:300px;
  overflow-x:scroll;
  overflow-y:auto
}
.tabp{
  max-height:80vh;
  height :80vh;
  width:400px;
}
.icon-down{
  width:50px;
  height:20px;
  background-color:#409EFF;
  margin:0 auto;
  border-radius :5px;
}
#footer {position:fixed;bottom:0;left:16%;width:83vw;z-index:1000; height:50vh; background-color:#ffffff;overflow:hidden;}
#expander{position:fixed;left:16%;width:83vw; height:6px; background-color:#999;z-index:999;}
#expander:hover{ cursor:n-resize;}
</style>